<template>
  <div class="top-button-container">
    <el-tooltip
      v-for="(button, index) in iconList"
      :key="index"
      class="item"
      effect="dark"
      :content="button.text"
      placement="top-start"
    >
      <i
        class="iconfont"
        :class="button.icon"
        @click="handleEmit(button.click)"
      />
    </el-tooltip>
  </div>
</template>

<script>
import "@/assets/css/iconfont.css";
export default {
  name: "button-area",
  components: {},
  props: {},
  data() {
    return {
      iconList: [
        {
          icon: "icon-list",
          text: "点位列表",
          click: "handlePointList",
        },
        {
          icon: "icon-reset",
          text: "重置",
          click: "handleReset",
        },
        {
          icon: "icon-save",
          text: "保存",
          click: "handleSave",
        },
        {
          icon: "icon-logout",
          text: "退出",
          click: "handleCancel",
        },
      ],
    };
  },
  watch: {
    allObjects: {
      handler(val) {
        if (val) {
        }
      },
      deep: false,
      immediate: true,
    },
  },
  methods: {
    handleEmit(name) {
      this.$emit(name);
    },
  },
};
</script>

<style lang="scss" scoped>
.top-button-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px; /* 元素间距 */
  // .item {
  //   flex: 0 0 calc(33.33% - 20px * 2 / 3); /* 不伸缩，基础宽度计算 */
  // }
  .iconfont {
    cursor: pointer;
    font-size: 24px;
    margin-top: 10px;
  }
}
</style>
